fix: align hero/banner/cards/columns with production, remove duplicate design tokens#2
Merged
Conversation
- Add new banner block with two-column layout (text left, image right) - Banner has navy background and underlined link styling - Implement auto-blocking for hero+cards pattern in same section - Add hero-attached and attached-to-hero CSS classes - Hero removes bottom padding when cards attached - Cards section supports paleblue background via section metadata - Add test page at /drafts/kiran/hero-cards-test 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Remove story variant CSS from cards.css (use columns block instead) - Add cards (light) variant with pale blue background - Update test page to use cards (light) instead of section metadata - Section paleblue metadata no longer affects cards layout 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Change images from fixed 190px to responsive sizing - Mobile: 40% width, column layout - Desktop: 280px fixed width, horizontal layout with 32px gap - Increase grid gaps to 48px/64px for better breathing room - Images maintain 1:1 aspect ratio 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Download favicon from https://www.aig.com/favicon.ico - Add favicon link to head.html 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Replace root favicon.ico with AIG favicon (5.3KB) - Remove icons/favicon.ico (wrong location) - Revert head.html change (not needed for /favicon.ico) - Browsers auto-detect /favicon.ico by convention 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Download Jost and Source Sans 3 variable fonts (170KB total) - Add @font-face declarations to fonts.css - Remove Google Fonts links from head.html - Remove old Roboto font files - Fonts now load from /fonts/ directory (lazy-loaded via fonts.css) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Change font-family from 'Jost' to jost (no quotes needed) - Change font-family from 'source-sans-3' to sourcesans (avoid hyphens) - Update brand.css to match new font names - All linting errors resolved 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
…ve duplicate design tokens - Rebuild banner to use hero's full-bleed gradient-overlay layout instead of a hard 50/50 column split, matching production's arrow-link CTA style - Fix hero/banner min-height and gradient stops against verified production computed values, then make height responsive via clamp() above ~1367px - Fix cards.light to use --paleblue-color (was --light-color by mistake), correct image size (190px, was 280px) and use an 8.33% proportional inset instead of a hardcoded 120px value that only matched one viewport width - Add shared --page-max-width (1920px) token so hero/banner/cards/columns cap and center consistently on ultra-wide screens instead of stretching indefinitely or diverging from each other - Add a columns "feature" variant (no background tint, rows respect their own authoring order for alternating image left/right) plus row spacing, bigger image/text proportions, and an arrow-style link to match the "AIG Performance & Initiatives" pattern - Remove duplicate color/spacing tokens between brand.css and styles.css, and a stale non-responsive --heading-size-* token set that was still wired into hero.css, causing its heading to never shrink on mobile 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
|
Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
|
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
bannerto use the full-bleed gradient-overlay layout (matchinghero) instead of a hard 50/50 column split, and matched its CTA link to production's arrow-link stylehero/bannermin-height and gradient stops against verified production computed values, then made height responsive viaclamp()above ~1367px viewport widthcards.light: wrong background token (--light-color→--paleblue-color), wrong image size (280px → 190px), and a hardcoded 120px inset that only matched one viewport width (→ proportional8.33%)--page-max-width(1920px) token sohero/banner/cards/columnscap and center consistently on ultra-wide screenscolumns"feature" variant (no background tint, alternating image-left/right per row via natural authoring order) plus row spacing, larger image/text proportions, and an arrow-style link, for the "AIG Performance & Initiatives" patternbrand.cssandstyles.css, and a stale non-responsive--heading-size-*token set still wired intohero.css— that one was an actual bug (hero heading never shrank on mobile)Test URLs
(Note: the PR template's
.aem.liveURLs 404 since this draft content is previewed but not published — using.aem.pageinstead, which resolves.)Test plan
npm run lintpasses (0 errors)🤖 Generated with Claude Code